本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧

經歷了29天的 CSS 選取器的洗禮，感謝各位的訂閱、支持與觀看，不知道大家對於 CSS 選取器是否有變的更加熟悉了呢？今天就讓我們來快速地回顧一下這 29 天的 CSS 選取器教學吧，另外為了大家學習方便，這次鐵人賽也特別加上了學習路徑懶人包給各位，讓你不會看到幾十個選取器就傻了，好歹有個學習的先後順序跟重要性排序。

快速目錄

• CSS 選取器是什麼？怎麼用？他能做些什麼事？
• Tag 元素選取器 - 網頁中最常用到的基本設定選取器 - 金魚都能懂了你還怕學不會嗎
• CSS class 選取器 - 切版與前端框架最常使用的CSS選取器 - 金魚都能懂了你還怕學不會嗎
• #ID 選取器 - 程式設計最常用到的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎
• CSS 群組式宣告 - 每個開發者都該學會的選取方式
• CSS 組合式宣告 - 新手開發從這裡開始進步
• CSS 層疊式宣告 - 讓你快速選到特定元素內的物件的選取器
• CSS 通用選取器 - 一個你我都該熟知的老朋友
• CSS 屬性選取器 - 一個選取自由度超高的選取器
• 親代選取器之妹妹選取器與鞭炮串選取器
• 子代選取器 - 一個最安全且不會讓你株連九族的選取器
• 僞類選取器 - 何謂僞類選取器
• 常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富
• ::before & ::after 無中生有的僞元素選取器 - 傑克這真是太神奇啦
• ::selection 選取狀態僞元素 - 讓你沒有選擇困難
• :checked 表單狀態選取器 - 讓你可以開開關關好開勳
• :lang 語言僞類選取器 - 多長的單字都不煩惱
• :first-letter 首字選取器 - 玩轉首字設計的好功能
• ::first-line 首行選取器 - 低調到不行的選取器
• :empty 空值選取器 - 比谷關的空氣更乾淨的選取器
• :not() 否定選取器 - 一個搞排擠的選取器
• :first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器
• :first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器
• :only-child 獨子選取器 - 這是啥媽寶選取器
• :only-of-type 類型獨子選取器
• :nth-child() & :nth-last-child() - 你覺得燒腦但其實根本不燒腦的選取器
• :nth-of-type() & :nth-last-of-type() - 你覺得燒腦但其實根本不燒腦的選取器趴兔
• :disabled & :enabled 表單用僞類選取器 - 一眼看穿那些不能按的按鈕
• :root 根目錄選取器 - 叫你阿爸出來講

新手必學的 CSS 選取器

身為一個新手，當然對於 CSS 選取氣可能會有個困擾就是到底需要學哪些選取器，以下精選了新手一定要會的 9 個 CSS 選取器，學會這些選取器的話應該可以在處理網頁上面順手許多喔。

• CSS 選取器是什麼？怎麼用？他能做些什麼事？
• Tag 元素選取器 - 網頁中最常用到的基本設定選取器 - 金魚都能懂了你還怕學不會嗎
• CSS class 選取器 - 切版與前端框架最常使用的CSS選取器 - 金魚都能懂了你還怕學不會嗎
• #ID 選取器 - 程式設計最常用到的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎
• CSS 群組式宣告 - 每個開發者都該學會的選取方式
• CSS 組合式宣告 - 新手開發從這裡開始進步
• CSS 層疊式宣告 - 讓你快速選到特定元素內的物件的選取器
• CSS 通用選取器 - 一個你我都該熟知的老朋友
• 常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富

入門進階者必學的 CSS 選取器

學會了基礎的 CSS 選取器之後，接著就能來看看進階的項目了，為何說是進階呢？主要是因為這邊的選取器可以讓你對網頁有更多的應用，並且可以讓你在撰寫 HTML 原始碼時可以更加的省時省力喔。

• 僞類選取器 - 何謂僞類選取器
• ::before & ::after 無中生有的僞元素選取器 - 傑克這真是太神奇啦
• 親代選取器之妹妹選取器與鞭炮串選取器
• 子代選取器 - 一個最安全且不會讓你株連九族的選取器
• ::selection 選取狀態僞元素 - 讓你沒有選擇困難
• :not() 否定選取器 - 一個搞排擠的選取器
• :first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器
• :first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器
• :nth-child() & :nth-last-child() - 你覺得燒腦但其實根本不燒腦的選取器
• :nth-of-type() & :nth-last-of-type() - 你覺得燒腦但其實根本不燒腦的選取器趴兔
• :first-letter 首字選取器 - 玩轉首字設計的好功能

提升效率必學的 CSS 選取器

如果你覺得自己寫的 CSS 選取器好像太多重複的 class 的話，那麼以下精選的幾個 CSS 選取器應該可以讓你省下不少的 CSS 選取器才對，這些選取器對 Amos 來說，可以讓我省下不少修修改改的時間呢！

• CSS 屬性選取器 - 一個選取自由度超高的選取器
• :root 根目錄選取器 - 叫你阿爸出來講
• :not() 否定選取器 - 一個搞排擠的選取器
• :first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器
• :first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器
• :nth-child() & :nth-last-child() - 你覺得燒腦但其實根本不燒腦的選取器
• :nth-of-type() & :nth-last-of-type() - 你覺得燒腦但其實根本不燒腦的選取器趴兔

多國語言網站必學的 CSS 選取器

• :lang 語言僞類選取器 - 多長的單字都不煩惱
• :root 根目錄選取器 - 叫你阿爸出來講

技能探究者必學的 CSS 選取器

如果你跟 Amos 一樣是 CSS 的狂熱愛好者的話，那麼以下這幾個選取器你就不得不去了解一下囉，這些選取器有部分可能應用的機會比較少，有部分則是應用的方式很彈性，有些則是可以讓網頁的使用性更加的加分，所以獨立出來讓各位可以思考看看有沒有機會可以創造出更多的應用方向喔。

• CSS 屬性選取器 - 一個選取自由度超高的選取器
• :only-child 獨子選取器 - 這是啥媽寶選取器
• :only-of-type 類型獨子選取器
• :empty 空值選取器 - 比谷關的空氣更乾淨的選取器
• :root 根目錄選取器 - 叫你阿爸出來講
• :checked 表單狀態選取器 - 讓你可以開開關關好開勳
• ::selection 選取狀態僞元素 - 讓你沒有選擇困難
• :disabled & :enabled 表單用僞類選取器 - 一眼看穿那些不能按的按鈕

以上就是 Amos 幫各位整理的學習途徑懶人包，讓你學習不會緊張慌亂，有條有理且不疾不徐地學習就能達到效果囉。希望各位喜歡～

再次感謝各位的觀看與支持，以上就是今天的 金魚都能懂的 CSS 選取器 - 學習路徑懶人包 - CSS 選取器學習地圖，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學